<template>
	<view class="container">
		<st-navigation :goHome='true' title="注册登录" backgroundColor="#fff"></st-navigation>

		<view class="main">
			<view class="title">验证码登录</view>

			<view class="login-form">
				<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
					<uni-forms-item name="mobile">
						<view class="form-item flex align-center">
							<view class="left">
								<picker @change="bindSegmentPickerChange" :value="formData.segment" :range="segmentOptions">
									<view class="flex align-center">
										<input class="inp-text" name="type" v-model="formData.segment" placeholder="请选择" :readonly="true"
											disabled />
										<text class="cuIcon-triangledownfill icon"></text>
									</view>
								</picker>
							</view>
							<uni-easyinput v-model="formData.mobile" placeholder="请输入手机号码" :inputBorder="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="captcha">
						<view class="form-item flex align-center">
							<uni-easyinput v-model="formData.captcha" placeholder="请输入验证码" :inputBorder="false" />
							<view class="get-code" v-if="countdown > 0">{{ countdown }}秒后重新发送</view>
							<view class="get-code" v-else @click="sendMessage">获取验证码</view>
						</view>
					</uni-forms-item>
				</uni-forms>

				<button type="primary" @click="submit" class="btn">登录</button>
			</view>
		</view>

	</view>
</template>

<script>
import graceChecker from '@/common/graceChecker';//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
export default {
	data() {
		return {
			segmentOptions: [
				'+86',
			],
			formData: {
				segment: '+86',
				mobile: '', //17625925671
				captcha: '', // 111111
			},
			rules: {},

			countdown: 0,
			cTimer: null,
			pageroute: ''
		};
	},
	onLoad(options) {
		if (options.url && options.url != undefined) {
			this.pageroute = options.url;
		}
	},
	methods: {
		bindSegmentPickerChange() { },
		sendMessage() {
			let { mobile } = this.formData;
			var rule = [
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
			];
			var formData = this.formData;
			var checkRes = graceChecker.check(formData, rule);
			console.log(checkRes)
			if (checkRes) {
				this.startTimer();
				this.countdown = 60;

				this.$api.get({
					url: '/wanlshop/sms/send',
					data: {
						event: 'mobilelogin',
						mobile
					},
					loadingTip: '验证码发送中...',
					success: res => {
						this.$wanlshop.msg('验证码发送成功');
					}
				});
			} else {
				this.$wanlshop.msg(graceChecker.error);
			}
		},
		startTimer() {
			if (this.cTimer == null) {
				this.cTimer = setInterval(() => {
					this.countdown--;
					if (this.countdown == 0) {
						this.clearTimer();
					}
				}, 1000)
			}
		},
		clearTimer() {
			clearInterval(this.cTimer);
			this.cTimer = null;
		},
		submit() {
			let { mobile, captcha } = this.formData;
			var rule = [
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' },
				{ name: 'captcha', checkType: 'string', checkRule: '4', errorMsg: '请输入4位验证码' },
			];
			var formData = this.formData;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				this.$api.post({
					url: '/wanlshop/user/mobilelogin',
					data: {
						mobile,
						captcha,
						client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync("wanlshop:chat_client_id") : null
					},
					loadingTip: '登录中...',
					success: res => {
						this.$wanlshop.msg('登录成功');
						uni.hideLoading();
						this.$store.dispatch('user/login', res);
						
						console.log(res.is_new);
						console.log(res.is_new == true);
						// todo 要改回来
						if (res.is_new == true) {
							uni.navigateTo({
								url: '/pagesYSM/ysmMy/setting/improve?form=login'
							});
						} else {
							if(this.pageroute){
								uni.reLaunch({
									url: decodeURIComponent(this.pageroute) || '/pages/ysmMy/ysmMy'
								});
							}else{
							 let pages = getCurrentPages();
							  if (pages.length > 1) {
								uni.navigateBack();
							  }else{
								 uni.reLaunch({
									url: decodeURIComponent(this.pageroute) || '/pages/ysmMy/ysmMy'
								 }); 
							  }
							}
							// uni.reLaunch({ 
							// 	url: decodeURIComponent(this.pageroute) || '/pages/ysmMy/ysmMy'
							// });
						}

						// this.$store.dispatch('cart/login');

					}
				});
			} else {
				this.$wanlshop.msg(graceChecker.error);
			}
		},
	}
}
</script>

<style lang="less" >
page {
	background-color: #ffffff;
}

.main {
	margin-top: 80rpx;

	.title {
		font-weight: 600;
		font-size: 48rpx;
		line-height: 68rpx;
		color: #333333;
		text-align: center;
	}

	/deep/ .login-form {
		margin-top: 80rpx;
		padding: 0 48rpx;

		.form-item {
			border-bottom: 1px solid #E6E6E6;

			.left {
				width: 120rpx;
				padding-right: 20rpx;
				margin-right: 20rpx;
				border-right: 1px solid #E6E6E6;

				font-weight: 400;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #333333;

				.uni-input-form,
				.uni-input-wrapper {
					text-align: center;
				}

				.icon {
					font-size: 46rpx;
				}
			}

			.get-code {
				font-weight: 400;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #F13130;
			}
		}

		.btn {
			margin-top: 80rpx;
			width: 100%;
			height: 96rpx;
			background: #F13130;
			border-radius: 200rpx;
		}
	}
}
</style>
